<template>
	<view class="app-container">
		<u--input id="input" @focus="focus" @blur="blur" border="bottom" v-model="nick_name" @change="change"></u--input>
		<button :loading="loading" :disabled="disabled" :class="{'save-btn': !disabled}" @click="handleSave">保 存</button>
	</view>
</template>

<script>
	import { updateUserInfo } from "@/api/user.js"
	export default {
		data() {
			return {
				nick_name:"",
				nickName:"",
				disabled: true,
				loading: false,
			}
		},
		created() {
			this.getInfo()
		},
		methods: {
			change(){
				if(this.nick_name !== this.nickName){
					this.disabled = false
				}
			},
			handleSave(){
				this.loading = true
				updateUserInfo({nickName:this.nick_name}).then(res => {
					this.loading = false
					uni.navigateBack();
				})
			},
			focus(){
				let inputEl = document.getElementById("input");
				inputEl.classList.add('input-focus')
			},
			blur(){
				let inputEl = document.getElementById('input');
				inputEl.classList.remove('input-focus')
			},
			getInfo(){
				this.$store.dispatch('user/getInfo').then(res => {
					let { nickName } = res;
					this.nick_name = nickName;
					this.nickName = nickName
				});
			},
		}
	}
</script>

<style lang="scss">
.app-container{
	padding: 20px;
	
	button{
		margin-top: 50px;
	}
	.save-btn{
		color: #fff;
		background-image: linear-gradient(to right, #38dde5, #1891d6);
	}
	
	.input-focus{
		border-color: #29988b !important;
	}
}
</style>
